<template>
  <div>
    <div id="AirQualityScoreDashboard" :style="style"/>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "AirQualityScoreDashboard",
  data(){
    return{
      style:{width:'100%',height:'100%'}
    }
  },
  mounted() {
    this.AirQualityScoreDashboard()
  },
  methods:{
    AirQualityScoreDashboard(){
      const chartDom = document.getElementById('AirQualityScoreDashboard');
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          left: 'center',
          text: '实时空气质量评分',
        },
        series: [
          {
            type: 'gauge',
            progress: {
              show: true,
              width: 18
            },
            axisLine: {
              lineStyle: {
                width: 18
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 15,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            axisLabel: {
              distance: 25,
              color: '#999',
              fontSize: 20
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 25,
              itemStyle: {
                borderWidth: 10
              }
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              fontSize: 80,
              offsetCenter: [0, '70%']
            },
            data: [
              {
                value: 70
              }
            ]
          }
        ]
      };

      option && myChart.setOption(option);

    }
  }
}
</script>

<style scoped>

</style>
